<template>
  <YsModal v-model="page.dialogVisible" :mask-closable="false" footer-hide :transfer="transfer" :class="[nopadding ? 'nopadding' : '']" :closable="closable" :draggable="draggable " :title="title" :width="width" v-bind="$attrs"
    v-on="$listeners">
    <slot ref="component"></slot>
  </YsModal>
</template>
<script>
export default {
  name: "prodialog",
  data: () => ({
    page: {
      dialogVisible: false,
    }
  }),
  props: {
    //表头
    title: {
      type: String,
      default: () => "编辑"
    },
    //是否关闭
    dialogVisible: {
      type: Boolean,
      default: () => false
    },
    //宽度
    width: {
      type: String,
      default: () => "50%"
    },
    //增加class
    nopadding: {
      type: Boolean,
      default: () => false
    },
    //是否可以拖拽
    draggable: {
      type: Boolean,
      default: () => false
    },
    //保持
    keep: {
      type: Boolean,
      default: () => false
    },
    //遮罩层是否关闭
    closable: {
      type: Boolean,
      default: () => true
    },
    //是否将弹窗放到body
    transfer: {
      type: Boolean,
      default: () => false
    },
  },
  provide() {
    return {
      thisdialog: this
    };
  },
  mounted() { },
  watch: {
    dialogVisible(v) {
      if (v) {
        this.show();
      } else {
        this.close();
      }
    }
  },
  methods: {
    show() {
      this.page.dialogVisible = true;
      return this;
    },
    close() {
      this.page.dialogVisible = false;
      return this;
    }
  }
};
</script>

<style lang="less" scoped>
.nopadding {
  /deep/ .ivu-modal {
    top: 170px;
    .ivu-modal-content {
      border-radius: 4px !important;
      overflow: hidden;
      a.ivu-icon-ios-close {
        font-size: 41px;
      }
      .ivu-modal-header {
        border-bottom: none;
        // background: #f5f7fa;
        display: flex;
        padding: 18px 16px;
        .ivu-modal-header-inner {
          font-size: 18px;
        }
      }
    }

    .ivu-modal-body {
      padding: 0px;
      overflow: auto;
    }
  }
  /deep/.foot-btn {
    text-align: right;
    button + button {
      margin-left: 16px;
    }
  }
}
::v-deep .ivu-icon-ios-close {
  color: #405580 !important;
}

</style>
